<template>
    <el-form :model="formData" :rules="rules" ref="formObj" label-width="80px">
		<el-form-item label="商品名称" prop="name">
			<el-input maxLength="20" v-model="formData.name" placeholder="请输入商品名称"></el-input>
		</el-form-item>
		<el-form-item label="价格" prop="price">
			<el-input-number v-model="formData.price" :precision="2" :min="0.01" ></el-input-number>
		</el-form-item>
		<el-form-item label="库存" prop="store">
			<el-input-number v-model="formData.store" :precision="0" :min="0" ></el-input-number>
		</el-form-item>
		<el-form-item label="商品类别" style="width: 230px;" prop="category">
			<!-- 
				:render-after-expand="false" 是否在第一次展开某个树节点后才渲染其子节点
				check-strictly 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
			 -->
			<el-tree-select
			    v-model="formData.categoryId"
			    :data="categoryList"
			    :check-strictly="false"
				:props="TreeSelectProps"
				:multiple="false"
			    :render-after-expand="false"
			    style="width: 240px"
			  />
		</el-form-item>
		<el-form-item  label="商品照片" prop="file">
			<el-upload
				list-type="picture-card"
				:auto-upload="false"
				action="#"
				:limit="4"
				multiple
				:on-change="uploadFile"
				:on-remove="removeFile"
				:on-exceed="handleExceed"
				v-model:file-list="fileList"
			>
				<el-icon><FolderAdd /></el-icon>
				<template #tip>
					最多上传4张图片
				</template>
			</el-upload>
			
		</el-form-item>
		<el-form-item label="商品说明" prop="description">
			<el-input type="textarea" :rows="5" v-model="formData.description" placeholder="请输入商品说明"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" :icon="IconSave" @click="save()">保存</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup>
import url from './pathUtil'
import { reactive, ref } from 'vue'
import IconSave from '@/components/icons/IconSave'
import { FolderAdd } from '@element-plus/icons-vue'
import { get,post } from '@/plugins/axios'
import { ElMessage } from 'element-plus'
import { getImagePath } from '@/util'
//接收父组件参数
const emits = defineEmits(['update:show', 'getTableData'])
const props = defineProps(['id', 'parentId', 'level', 'categoryList'])
const fileList = reactive([])
//表单数据
const formData = reactive({
	id: null,
	name: '',
	description: '',
	price: 0,
	store: 0,
	categoryId: 0,
	imgs: [],
    files: [],
    urls: []
})
const TreeSelectProps = reactive({
	children: 'children',
	label: 'name', // 树节点显示的文本字段
	value: 'id' // 绑定的值字段
})
const categoryList = ref([])
categoryList.value = props.categoryList
//校验规则
const rules = reactive({
	name: {
		required: true, message: '商品名称不能为空', trigger: 'blur'
	},
	price: {
		required: true, message: '商品价格不能为空', trigger: 'blur'
	},
	store: {
		required: true, message: '库存不能为空', trigger: 'blur'
	},
	description: {
		required: true, message: '商品说明不能为空', trigger: 'blur'
    }
    
})
const params = reactive({})
const formObj = ref()
//如果id不为空 给id赋值
if(props.id) {
	formData.id = props.id
	getById()
}

//得到类别数据
// getCategoryList()
// function getCategoryList() {
// 	get('/category/list', params, content => {
// 		categoryList.value = content
// 	})
// }

function save() {
	console.dir(formData)
	
	post(props.id ? url.update : url.add, formData, content =>{
		emits('update:show', false)
		emits('getTableData')
	},formObj)
}

function getById() {
	get(url.getById, { id: props.id }, content => {
		for(const key in formData) {
			//检查 content 对象是否有名为 key 的自身属性。
			//如果有，则条件为真，执行 if 语句块中的代码；
			//如果没有，则为假，不执行 if 语句块中的代码
			if(Object.prototype.hasOwnProperty.call(content,key)) {
				formData[key] = content[key]
			}
		}
		for(let i = 0; i < content.imagePathList.length; i++) {
			fileList.push({ url: getRealPath(content.imagePathList[i]) })
            //formData.files.push(fileList[i])
            //formData.urls.push(fileList[i])
		}
		console.log('fileList', fileList)
		console.log('formData中files值', formData.files)
	})
}
//上传文件处理
function uploadFile(file, files) {
    formData.files.length = 0
    formData.urls.length = 0
    for (const i in files) {
        if (files[i].status === 'ready') {
            formData.files.push(files[i].raw)
        } else {
            formData.urls.push(files[i].url)
        }
    }
    console.log('改变后的file', formData.files)
    console.log('改变后的urls', formData.urls)

}
//移除文件处理
function removeFile(file, files) {
	// file 是被移除的文件对象
	// fileList 是移除文件后的文件列表
	formData.files.length = 0
    formData.urls.length = 0
    for (const i in files) {
        if (files[i].status === 'ready') {
            formData.files.push(files[i].raw)
        } else {
            formData.urls.push(files[i].url)
        }
    }
    console.log('移除后的file', formData.files)
    console.log('移除后的urls', formData.urls)
}
//文件达到限制的处理
function handleExceed() {
	ElMessage({  
		message: '请谅解！最多支持上传4张图片！',
		type: 'danger'
	})
}
//拼接文件路径
function getRealPath(path) {
	return 'http://10.25.128.84:9000' + path
}
</script>

<style lang="scss" scoped>

</style>